<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./css/warpper.css">
    <link rel="stylesheet" href="./css/header_footer.css">
    <link rel="stylesheet" href="./css/shopping_trolley.css">
    <script src="./lib/jquery.js"></script>
    <script src="./js/shop.js"></script>
</head>
<body>
    <!-- 顶部区域开始 -->
    <div class="top1">
        <div class="warpper clearfix">
            <p class="fl">legochina.cn</p>
            <span class="fr">
                欢迎光临
                <a href="#">乐购</a>,
                请 登陆\
                <a href="#">注册</a>
            </span>
        </div>
    </div>
    <!-- 顶部区域结束 -->

    <!-- 头部区域开始 -->
    <div class="header warpper clearfix">
        <div class="header_logo fl">
            <img src="./imgs/04-购物车_02.png" alt="">
        </div>
        <div class="header_right fr">
            <form action="#" class="search clearfix" >
                    <input type="text" placeholder="拖鞋啊" >
                    <input type="button" class="input2">
            </form>
            <div class="header_right_r">
                配送至:
                <select class="">
                    <option value="">成都高新区三环内</option>
                    <option value="">成都高新区二环内</option>
                    <option value="">成都高新区一环内</option>
                </select>
            </div>
        </div>
    </div>
    <!-- 头部区域结束 -->
    
    <!-- 购物栏开始 -->
    <div class="shopp warpper">
        <!-- 购物栏上部分 -->
        <div class="shopp_top">
            <p>填写并核对订单信息</p>
            <ul class="fs18 clearfix">
                <li class="shopp-checkbox">
                    <input type="checkbox" class="quanxuan">全选
                </li>
                <li class="shopp-goods">商品</li>
                <li class="shopp-price">单价</li>
                <li class="shopp-quantity">数量</li>
                <li class="shopp-sum">小计</li>
                <li class="shopp-action">操作</li>
            </ul>
        </div>
        <!-- 购物栏中间部分 -->
        <div class="shopp_mid">
            <ul class="clearfix">
                <li class="shopp-checkbox1">
                    <input type="checkbox" class="inp1">
                    <div><img src="./imgs/index08_05.jpg" alt=""></div>
                </li>
                <li class="shopp-goods1 fs16">从你的全世界路过</li>
                <li class="shopp-price1">41.01</li>
                <li class="shopp-quantity1">
                    <span class="addNum">+</span><input type="text" class="num" value="1"><span class="reduce">-</span>
                </li>
                <li class="shopp-sum1">
                    41.00
                </li>
                <li class="shopp-action1">
                    <button>删除</button>
                    <button>移到我的关注</button>
                </li>
            </ul>
            <ul class="clearfix">
                <li class="shopp-checkbox1">
                    <input type="checkbox" class="inp1">
                    <div><img src="./imgs/index08_05.jpg" alt=""></div>
                </li>
                <li class="shopp-goods1 fs16">从你的全世界路过</li>
                <li class="shopp-price1">41.00</li>
                <li class="shopp-quantity1">
                    <span class="addNum">+</span><input type="text" class="num" value="1"><span class="reduce">-</span>
                </li>
                <li class="shopp-sum1">
                    41.00
                </li>
                <li class="shopp-action1">
                    <button>删除</button>
                    <button>移到我的关注</button>
                </li>
            </ul>
            <ul class="clearfix">
                <li class="shopp-checkbox1">
                    <input type="checkbox" class="inp1">
                    <div><img src="./imgs/index08_05.jpg" alt=""></div>
                </li>
                <li class="shopp-goods1 fs16">从你的全世界路过</li>
                <li class="shopp-price1">41.00</li>
                <li class="shopp-quantity1">
                    <span class="addNum">+</span><input type="text" class="num" value="1"><span class="reduce">-</span>
                </li>
                <li class="shopp-sum1">
                    41.00
                </li>
                <li class="shopp-action1">
                    <button>删除</button>
                    <button>移到我的关注</button>
                </li>
            </ul>
        </div>
        <!-- 购物栏底部 -->
        <div class="shopp_bom clearfix">
            <div class="shopp-bom-left fl">
                <input type="checkbox" class="quanxuan">
                <button class="fs16 c80">删除选中商品</button>
            </div>
            <div class="shopp-bom-right fr clearfix">
                <p class="fl fs16 c80">
                    已选择  <span class="f60_c fwb" id="aNum">0</span>   件商品
                </p>
                <p class="fl fs16 fwb">
                    总价
                    <span class="f60_c" id="total">0</span>
                </p>
                <div class="fl f60_b ">去结算</div>
            </div>
        </div>
    </div>
    
    <!-- 猜你喜欢开始 -->
    <div class="guess warpper">
        <h3>
            <span class="f60_b fwn">猜你喜欢</span>
        </h3>
        <ul class="clearfix">
            <script>
                for(let i=0;i<5;i++){
                    document.write(`
                        <li>
                            <div>
                                <img src="./imgs/书籍/22935553-1_l.jpg" alt="">
                            </div>
                            <div>
                                <img src="./imgs/eightzhe.png" alt="">
                            </div>
                            <p>白夜行 &emsp;东野上吾</p>
                            <p>
                                推荐:
                                <img src="./imgs/XX.png" alt="">
                            </p>
                            <span>￥:38</span>
                            <span>￥:58</span>
                        </li>
                    `)
                }
            </script>
        </ul>
        <div>
            <img src="./imgs/moshou.png" alt="">
        </div>
    </div>
    <!-- 猜你喜欢结束 -->

    <!-- 页脚区域开始 -->
    <div class="footer">
        <div class="footer_top">
            <ul class="warpper clearfix">
                <li>
                    <img src="./imgs/222_11.png" alt="">
                </li>
                <li>
                    <img src="./imgs/222_13.png" alt="">
                </li>
                <li>
                    <img src="./imgs/222_15.png" alt="">
                </li>
                <li>
                    <img src="./imgs/222_17.png" alt="">
                </li>
            </ul>
        </div>
        <div class="footer_mid warpper clearfix">
            <ul class="ul1">
                <li>购物指南</li>
                <li>购物流程</li>
                <li>发票制度</li>
                <li>账户管理</li>
                <li>会员优惠</li>
            </ul>
            <ul>
                <li>支付方式</li>
                <li>货到付款</li>
                <li>网上支付</li>
                <li>礼品卡支付</li>
                <li>银行转帐</li>
            </ul>
            <ul>
                <li>订单服务</li>
                <li>订单配送查询</li>
                <li>订单状态说明</li>
                <li>自助取消订单</li>
                <li>自助修改订单</li>
            </ul>
            <ul>
                <li>退换货</li>
                <li>退换货政策</li>
                <li>自助申请退换货</li>
                <li>退换货进度查询</li>
                <li>退款方式和时间</li>
            </ul>
            <ul>
                <li>商家服务</li>
                <li>商家中心</li>
                <li>运营服务</li>
                <li>加入尾品汇</li>
            </ul>
            <img src="./imgs/logo_00.png" alt="">
        </div>
        <div class="footer_bom warpper">
            <p>
                公司简介 &emsp; | &emsp; Investor Relations  &emsp;| &emsp; 网站联盟  &emsp;|&emsp;  乐购招商  &emsp;|&emsp;  机构销售  &emsp;|&emsp;  手机乐购  &emsp;|&emsp;  官方Blog   &emsp;|&emsp;  热词搜索
            </p>
            <p>
                Copyright (C) 乐购网 2004-2016, All Rights Reserved
            </p>
        </div>
    </div>
    <!-- 页脚区域结束 -->
</body>
</html>